<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html>
<head>
<base href="${path}/pages/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>学生管理系统</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
	
	<div class="layui-fluid">
		<div class="layui-card-body">
			<div class="layui-btn-group">
				<button class="layui-btn layui-btn-normal toolbar" data-type="add"><i class="layui-icon layui-icon-add-1"></i> 添加</button>
				<button class="layui-btn layui-btn-danger toolbar" data-type="batchdel"><i class="layui-icon layui-icon-delete"></i> 删除</button>
			</div>
			
			<table id="lay-table" lay-filter="lay-table"></table>
			
		</div>
		
	</div>
	
	<!-- 自定义模板 -->
  	<script type="text/html" id="tr-opts">
    	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
  	</script>
	
	<script src="../layui/layui.js"></script>
	<script>
	layui.use(['layer', 'table'], function(){
		var layer = layui.layer;
		var table = layui.table;
		var $ = layui.$;
		
		//第一个实例
		table.render({
		    elem: '#lay-table',
		    height: 'full-80',
		    url: '${path}/action/clazz/list/',
		    page: true,
		    cols: [[ //表头
		        {checkbox: true},
		        {title: '#', type:'numbers', align: 'center', width: 40}, 
		      	{field: 'name', title: '班级名称', align: 'center', width:120, sort:true},
		      	{field: 'note', title: '备注', align: 'center', sort:true},
		      	{title: '操作', fixed: 'right', width: 160, align: 'center', toolbar: '#tr-opts'}
		    ]],
		    limits: [15, 30, 50, 100, 200], 
			limit: 15,  //默认采用25
			loading: true,
			autoSort: false
		});
		
		//表格行的工具栏
        table.on('tool(lay-table)', function(obj) {
            var data = obj.data;
            if(obj.event === 'del') {
                layer.confirm('您确定要删除行吗？', function(index) {
                	$.ajax({
        				url: '${path}/action/clazz/del',
        				data: {
        					id: data.id
        				},
        				success: function(json) {
        					table.reload('lay-table');
                  			layer.msg('删除成功');	
        				}        				
        			});
                })
            } else if(obj.event === 'edit') {
            	layer.open({
	          		type: 2,  //打开一个iframe
	          		title: '编辑班级',
	          		content: '${path}/action/clazz/get?id=' + data.id,
	          		maxmin: true,
	          		area: ['500px', '300px'],
	          		btn: ['确定', '取消'],
	          		yes: function(index, layero){
	            		//点击确认触发 iframe 内容中的按钮提交
	            		var frm = layero.find('iframe').contents().find("#lay-form-submit");
	            		frm.click();
	          		}
	        	}); 
            }
        });
		
		// 排序
        table.on('sort(lay-table)', function(obj) {
        	table.reload('lay-table', {
        		initSort: obj,
        		where: {
        			orderBy: obj.field,
        			orderDir: obj.type
        		}
        	});
        });
		
     	// toolbar工具栏
    	var active = {
      		batchdel: function() {
        		var checkData = table.checkStatus('lay-table').data; //得到选中的数据
        		if(checkData.length === 0) {
        			layer.msg('请选择数据');
          			return false;
        		}
        			
        		var idArr = [];
        		for(var i=0; i<checkData.length; i++) {
        			idArr.push(checkData[i].id);
        		}
        		layer.confirm('确定删除吗？', function(index) {
        			$.ajax({
        				url: '${path}/action/clazz/multiDel',
        				data: {
        					ids: idArr.join(',')
        				},
        				success: function(json) {
        					table.reload('lay-table');
                  			layer.msg('已删除');	
        				}        				
        			});          			
        		});
      		},
	      	add: function() {
	        	layer.open({
	          		type: 2,
	          		title: '增加班级',
	          		content: '${path}/pages/clazz_form.jsp',
	          		maxmin: true,
	          		area: ['500px', '300px'],
	          		btn: ['确定', '取消'],
	          		yes: function(index, layero){
	            		//点击确认触发 iframe 内容中的按钮提交
	            		var frm = layero.find('iframe').contents().find("#lay-form-submit");
	            		frm.click();
	          		}
	        	}); 
      		}
   		}; 

		$('.toolbar').on('click', function(){
      		var type = $(this).data('type');
      		active[type] ? active[type].call(this) : '';
		});
		
	});
	</script>
	
</body>
</html>